<template>
	<view>
		<view class="order-header" @click="handleOrder">
			<view class="order-title">
				我的订单
			</view>
			<view class="tui-cell-sub">
				<view>全部订单</view>
				<view>
					<image :src="state.arrow" mode="widthFix" class="arrow-img"></image>
				</view>
			</view>
		</view>
		<view class="ss-order-menu-wrap ss-flex ss-col-center">
			<view class="menu-item ss-flex-1 ss-flex-col ss-row-center ss-col-center" v-for="item in orderMap"
				:key="item.title" @tap="handleOrderItemClick(item)">
				<uni-badge class="uni-badge-left-margin" :text="getOrderCount(item.type)" absolute="rightTop"
					size="small" :offset="[0, 0]">
					<image class="item-icon" :src="item.icon" mode="aspectFit"></image>
				</uni-badge>
				<view class="menu-title">{{ item.title }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	/**
	 * 装修组件 - 订单菜单组
	 */
	import sheep from '@/sheep';
	import { computed, reactive } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import order1 from '@/static/my/order1.png'
	import order2 from '@/static/my/order2.png'
	import order3 from '@/static/my/order3.png'
	import order4 from '@/static/my/order4.png'
	import order5 from '@/static/my/order5.png'
	import arrow from '@/static/my/arrow.png'

	// 组件属性
	const props = defineProps({
		requireLogin: {
			type: Boolean,
			default: false
		},
		data: {
			type: Object,
			default() {}
		}
	})

	// 获取登录状态
	const isLogin = computed(() => sheep.$store('user').isLogin);

	// 检查登录状态 - 点击操作时检查
	const checkLoginStatus = () => {
		if (!isLogin.value) {
			uni.showModal({
				title: '提示',
				content: '此功能需要登录后才能使用',
				confirmText: '去登录',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.navigateTo({
							url: '/subPackages/login/login'
						})
					}
				}
			})
			return false
		}
		return true
	}
	const state=reactive({
		arrow
	})
	const orderMap = [{
			title: '待付款',
			value: '1',
			icon: order1,
			path: '/subPackages/order/list',
			type: 'unpaid',
		},
		{
			title: '待发货',
			value: '2',
			icon: order2,
			path: '/subPackages/order/list',
			type: 'nosend',
		},
		{
			title: '待收货',
			value: '3',
			icon: order3,
			path: '/subPackages/order/list',
			type: 'noget',
		},
		{
			title: '已完成',
			value: '4',
			icon: order4,
			path: '/subPackages/order/list',
			type: 'nocomment',
		},
		{
			title: '售后/退款',
			value: '0',
			icon: order5,
			path: '/pages/order/aftersale/list',
			type: 'aftersale',
		}
		// {
		// 	title: '全部订单',
		// 	value: '0',
		// 	icon: order5,
		// 	path: '/subPackages/order/list',
		// },
	];
	const numData = computed(() => sheep.$store('user').numData);
	
	// 跟踪API请求状态，避免重复请求
	const apiRequesting = reactive({
		unpaid: false,
		nosend: false,
		noget: false,
		aftersale: false,
		nocomment: false
	});
	
	// 页面显示时重置API请求状态，确保能重新获取数据
	onShow(() => {
		// 重置所有API请求状态
		apiRequesting.unpaid = false;
		apiRequesting.nosend = false;
		apiRequesting.noget = false;
		apiRequesting.aftersale = false;
		apiRequesting.nocomment = false;
		console.log('页面显示，重置API请求状态');
	});
	
	// 获取订单数量的方法
	const getOrderCount = (type) => {
		const orderData = numData.value?.order_num?.[type];
		
		// 调试信息：显示所有订单类型的数据
		console.log(`订单数量调试 - ${type}:`, {
			orderData,
			dataType: typeof orderData,
			isArray: Array.isArray(orderData),
			numData: numData.value?.order_num
		});
		
		// 如果数据为空，直接返回空字符串，不显示badge
		if (!orderData) {
			console.log(`${type} 数据为空，不显示badge`);
			return '';
		}
		
		// 特殊处理：待付款数量 - 先显示当前数据，然后异步更新为total字段
		if (type === 'unpaid') {
			// 如果后端返回的是数组，返回数组长度
			if (Array.isArray(orderData)) {
				console.log(`待付款数组长度: ${orderData.length}`);
				return orderData.length;
			}
			
			// 如果后端返回的是数字，先显示这个数字，然后异步更新为total字段
			if (typeof orderData === 'number') {
				console.log(`待付款当前数量: ${orderData}`);
				// 直接调用API获取最新的total字段
				getUnpaidOrderCount();
				// 先显示当前数字，等待API返回total字段后更新
				return orderData;
			}
			
			// 其他情况返回空字符串，不显示badge
			return '';
		}
		
		// 特殊处理：待收货数量 - 先显示当前数据，然后异步更新为total字段
		if (type === 'noget') {
			// 如果后端返回的是数组，返回数组长度
			if (Array.isArray(orderData)) {
				console.log(`待收货数组长度: ${orderData.length}`);
				return orderData.length;
			}
			
			// 如果后端返回的是数字，先显示这个数字，然后异步更新为total字段
			if (typeof orderData === 'number') {
				console.log(`待收货当前数量: ${orderData}`);
				// 直接调用API获取最新的total字段
				getNogetOrderCount();
				// 先显示当前数字，等待API返回total字段后更新
				return orderData;
			}
			
			// 其他情况返回空字符串，不显示badge
			return '';
		}
		
		// 特殊处理：待发货数量 - 先显示当前数据，然后异步更新为total字段
		if (type === 'nosend') {
			// 如果后端返回的是数组，返回数组长度
			if (Array.isArray(orderData)) {
				console.log(`待发货数组长度: ${orderData.length}`);
				return orderData.length;
			}
			
			// 如果后端返回的是数字，先显示这个数字，然后异步更新为total字段
			if (typeof orderData === 'number') {
				console.log(`待发货当前数量: ${orderData}`);
				// 直接调用API获取最新的total字段
				getNosendOrderCount();
				// 先显示当前数字，等待API返回total字段后更新
				return orderData;
			}
			
			// 其他情况返回空字符串，不显示badge
			return '';
		}
		
		// 特殊处理：售后数量 - 先显示当前数据，然后异步更新为total字段
		if (type === 'aftersale') {
			// 如果后端返回的是数组，返回数组长度
			if (Array.isArray(orderData)) {
				console.log(`售后数组长度: ${orderData.length}`);
				return orderData.length;
			}
			
			// 如果后端返回的是数字，先显示这个数字，然后异步更新为total字段
			if (typeof orderData === 'number') {
				console.log(`售后当前数量: ${orderData}`);
				// 直接调用API获取最新的total字段
				getAftersaleOrderCount();
				// 先显示当前数字，等待API返回total字段后更新
				return orderData;
			}
			
			// 其他情况返回空字符串，不显示badge
			return '';
		}
		
		// 特殊处理：已完成数量 - 先显示当前数据，然后异步更新为total字段
		if (type === 'nocomment') {
			// 如果后端返回的是数组，返回数组长度
			if (Array.isArray(orderData)) {
				console.log(`已完成数组长度: ${orderData.length}`);
				return orderData.length;
			}
			
			// 如果后端返回的是数字，先显示这个数字，然后异步更新为total字段
			if (typeof orderData === 'number') {
				console.log(`已完成当前数量: ${orderData}`);
				// 直接调用API获取最新的total字段
				getNocommentOrderCount();
				// 先显示当前数字，等待API返回total字段后更新
				return orderData;
			}
			
			// 其他情况返回空字符串，不显示badge
			return '';
		}
		
		// 其他订单类型的处理逻辑
		// 如果orderData是undefined、null、空字符串，返回0
		if (orderData === undefined || orderData === null || orderData === '') {
			return 0;
		}
		
		// 如果orderData是数组，返回数组长度
		if (Array.isArray(orderData)) {
			return orderData.length;
		}
		
		// 如果orderData是数字，直接返回
		if (typeof orderData === 'number') {
			return orderData;
		}
		
		// 如果orderData是字符串，尝试转换为数字
		const numCount = Number(orderData);
		if (!isNaN(numCount)) {
			return numCount;
		}
		
		// 其他情况返回0
		return 0;
	};
	const handleOrder=()=>{
		if (props.requireLogin && !checkLoginStatus()) return
		// 在跳转前刷新订单数据
		refreshOrderData();
		uni.navigateTo({
			url:`/subPackages/order/list`
		})
	}
	
	// 刷新订单数据
	const refreshOrderData = async () => {
		try {
			// 强制刷新订单数据
			await sheep.$store('user').getNumData();
		} catch (error) {
			console.error('刷新订单数据失败:', error);
		}
	}

	// 获取实际的待付款订单数量
	const getUnpaidOrderCount = async () => {
		try {
			// 调用订单列表API获取待付款订单
			const res = await sheep.$api.order.list({
				type: 'unpaid',
				page: 1,
				list_rows: 100 // 获取足够多的数据
			});
			
			if (res.code === 1 && res.data) {
				// 获取total字段
				const total = res.data.total || 0;
				console.log(`待付款订单总数: ${total}`);
				
				// 更新numData中的待付款数据
				if (numData.value && numData.value.order_num) {
					numData.value.order_num.unpaid = total;
				}
				
				return total;
			}
		} catch (error) {
			console.error('获取待付款订单数量失败:', error);
		}
		return 0;
	}

	// 获取实际的待收货订单数量
	const getNogetOrderCount = async () => {
		try {
			// 调用订单列表API获取待收货订单
			const res = await sheep.$api.order.list({
				type: 'noget',
				page: 1,
				list_rows: 100 // 获取足够多的数据
			});
			
			if (res.code === 1 && res.data) {
				// 获取total字段
				const total = res.data.total || 0;
				console.log(`待收货订单总数: ${total}`);
				
				// 更新numData中的待收货数据
				if (numData.value && numData.value.order_num) {
					numData.value.order_num.noget = total;
				}
				
				return total;
			}
		} catch (error) {
			console.error('获取待收货订单数量失败:', error);
		}
		return 0;
	}

	// 获取实际的待发货订单数量
	const getNosendOrderCount = async () => {
		try {
			// 调用订单列表API获取待发货订单
			const res = await sheep.$api.order.list({
				type: 'nosend',
				page: 1,
				list_rows: 100 // 获取足够多的数据
			});
			
			if (res.code === 1 && res.data) {
				// 获取total字段
				const total = res.data.total || 0;
				console.log(`待发货订单总数: ${total}`);
				
				// 更新numData中的待发货数据
				if (numData.value && numData.value.order_num) {
					numData.value.order_num.nosend = total;
				}
				
				return total;
			}
		} catch (error) {
			console.error('获取待发货订单数量失败:', error);
		}
		return 0;
	}

	// 获取实际的售后订单数量
	const getAftersaleOrderCount = async () => {
		try {
			// 调用售后订单列表API获取售后订单
			const res = await sheep.$api.order.aftersale.list({
				type: 'all',
				page: 1,
				list_rows: 5
			});
			
			if (res.code === 1 && res.data) {
				// 获取total字段
				const total = res.data.total || 0;
				console.log(`售后订单总数: ${total}`);
				
				// 更新numData中的售后数据
				if (numData.value && numData.value.order_num) {
					numData.value.order_num.aftersale = total;
				}
				
				return total;
			}
		} catch (error) {
			console.error('获取售后订单数量失败:', error);
		}
		return 0;
	}

	// 获取实际的已完成订单数量
	const getNocommentOrderCount = async () => {
		try {
			// 调用订单列表API获取已完成订单
			const res = await sheep.$api.order.list({
				type: 'nocomment',
				page: 1,
				list_rows: 100 // 获取足够多的数据
			});
			
			if (res.code === 1 && res.data) {
				// 获取total字段
				const total = res.data.total || 0;
				console.log(`已完成订单总数: ${total}`);
				
				// 更新numData中的已完成数据
				if (numData.value && numData.value.order_num) {
					numData.value.order_num.nocomment = total;
				}
				
				return total;
			}
		} catch (error) {
			console.error('获取已完成订单数量失败:', error);
		}
		return 0;
	}


	// 处理订单项点击
	const handleOrderItemClick = (item) => {
		if (props.requireLogin && !checkLoginStatus()) return
		
		// 售后列表页面不传参数
		if (item.path === '/pages/order/aftersale/list') {
			sheep.$router.go(item.path)
		} else {
			sheep.$router.go(item.path, { type: item.value })
		}
	}
	
</script>

<style lang="scss" scoped>
	.order-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20rpx 30rpx 0;
		.order-title {
			font-family: PingFang;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;
			line-height: 48rpx;
		}
	
		.tui-cell-sub {
			display: flex;
			align-items: center;
			font-family: PingFang;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
	
			.arrow-img {
				width: 15rpx;
				margin-left: 10rpx;
				display: block;
	
			}
		}
	}
	::v-deep .uni-badge--error{
		background: #FF7C00 !important;
	}
	
	::v-deep .uni-badge {
		position: absolute !important;
		top: -5rpx !important;
		right: -5rpx !important;
		z-index: 999 !important;
	}
	.ss-order-menu-wrap {
		.menu-item {
			height: 160rpx;
			position: relative;
			z-index: 10;

			.menu-title {
				font-size: 24rpx;
				line-height: 24rpx;
				color: #333333;
				margin-top:10rpx;

			}

			.item-icon {
				width: 44rpx;
				height: 44rpx;
			}

			.num-icon {
				position: absolute;
				right: 18rpx;
				top: 18rpx;
				// width: 40rpx;
				padding: 0 8rpx;
				height: 26rpx;
				background: #FF7C00;
				border-radius: 13rpx;
				color: #fefefe;
				display: flex;
				align-items: center;

				.num {
					font-size: 24rpx;
					transform: scale(0.8);
				}
			}
		}
	}
</style>